import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  // 同一路径可以匹配多个路由，谁先定义，谁的优先级最高
  // {
  //   path: "/discover",
  //   // name: "about",
  //   component: () => import("@/pages/page404"),
  // },
  {
    path: "/discover",
    // 具名路由 路径可以直接写名字
    name: "discover",
    component: () =>
      import(/* webpackChunkName: "discover" */ "@/pages/discover"),
    //嵌套路由
    children: [
      {
        path: "music",
        component: () =>
          import(/*webpackChunkName:"music" */ "@/pages/discover/music"),
      },
      {
        path: "radio",
        component: () =>
          import(/*webpackChunkName:"music" */ "@/pages/discover/radio"),
      },
    ],
  },
  {
    path: "/personal/:id",
    // name: "about",
    component: () =>
      import(/* webpackChunkName: "discover" */ "@/pages/personal"),
  },
  {
    path: "/collect",
    // name: "about",
    component: () =>
      import(/* webpackChunkName: "discover" */ "@/pages/collect"),
  },
  {
    path: "/list",
    // name: "about",
    component: () => import(/* webpackChunkName: "discover" */ "@/pages/list"),
  },
  {
    path: "/detail/:productid",
    // name: "about",
    props: true,
    component: () =>
      import(/* webpackChunkName: "discover" */ "@/pages/detail"),
  },
  // 404
  {
    path: "*",
    component: () => import("@/pages/page404"),
  },
];

const router = new VueRouter({
  routes,
});

export default router;
